<template>
  <div class="auth_container">
    <view class="form_container">
      <van-cell-group inset :border="false" custom-class="group">

        <van-cell is-link title="国籍（地区）" v-if="!disabled" :value="countryTxt" @click="showCountry = true"></van-cell>
        <van-cell title="国籍（地区）" v-else :value="countryTxt"></van-cell>
        <van-cell title="证件类型" value="身份证"></van-cell>
        <van-field
          :value="userinfo.user_name"
          placeholder="请输入用户名"
          label="姓名"
          label-class="theme_color"
          input-class="input-class"
          @change="doNameChange"
          :disabled="disabled"
        />
        <van-field
          :value="userinfo.user_no"
          label="身份证号码"
          placeholder="请输入身份证号码"
          autosize
          label-class="theme_color"
          input-class="input-class"
          @change="doNoChange"
          :disabled="disabled"
        />

        <view class="bottom" v-if="!userinfo.id">
          <view class="verify_button" @click="changeIdCard">提交资料</view>
        </view>

        <van-cell v-if="userinfo.id">
          <van-button round type="primary" style="margin-right: 10px" v-if="disabled"
                      @click="disabled = false;buttonTxt='提交修改'">修改
          </van-button>
          <van-button round type="primary" style="margin-right: 10px" v-if="!disabled" @click="changeIdCard">
            {{ buttonTxt }}
          </van-button>
          <van-button round type="danger" @click="showDialog">删除</van-button>
        </van-cell>
      </van-cell-group>

      <van-cell-group inset :border="false" custom-class="group">

        <van-cell title="银行卡" icon="card" @click="showAdd('bank', 'add')" size="large">
          <van-icon name="plus" class="custom-icon"/>
          添加
        </van-cell>
        <van-cell v-for="(item, index) in cardInfo" :key="index" :title="item.card_name" :label="item.card_no" v-if="item.type==1" value-class="v-class">
          <van-button round type="primary" size="mini" style="margin-right: 10px" @click="showEdit(index, 'edit')">修改</van-button>
          <van-button round type="danger" size="mini" style="margin-right: 10px" @click="showDel(index, 'del')">删除</van-button>
        </van-cell>


      </van-cell-group>
      <van-cell-group inset :border="false" custom-class="group">
        <van-cell title="支付宝" icon="alipay" @click="showAdd('zfb', 'add')" size="large" style="margin-top: 30px">
          <van-icon name="plus" class="custom-icon"/>
          添加
        </van-cell>
        <van-cell v-for="(item, index) in cardInfo" :key="index" :title="item.card_name" :label="item.card_no" v-if="item.type==2" value-class="v-class">
          <van-button round type="primary" size="mini" style="margin-right: 10px" @click="showEdit(index, 'edit')">修改</van-button>
          <van-button round type="danger" size="mini" style="margin-right: 10px" @click="showDel(index, 'del')">删除</van-button>
        </van-cell>

      </van-cell-group>
      <van-cell-group inset :border="false" custom-class="group">
        <van-cell>
          <view class="bottom_tips">
            <view class="tip_item">
              *请注意，一但提交，则无法进行变更，如有特殊需求请联系我们
            </view>
            <view class="tip_item">
              *您的信息仅供平台认证审核使用，我们将严格保密，审核通过周期为24小时
            </view>
          </view>
        </van-cell>
      </van-cell-group>
      <view class="safeBottom"></view>

    </view>
    <van-action-sheet
      :show="showCountry"
      :actions="country"
      @close="CloseCountry"
      @select="SelectCountry"
    />
    <van-popup
      :show="showAcc"
      @close="closeAcc"
      round
      closeable
      close-icon-position="top-right"
      :custom-style="custom_style"
    >
      账户
      <van-field :value="account.card_name" @change="doCardnameChange" placeholder="名称" :border="false"
                 custom-style="background-color:#fff0;border: 1px solid white;border-radius: 8px;margin: 30px 0;"/>
      <van-field v-if="buttonStatus!=='edit'" :value="account.card_no" @change="doCardnoChange" placeholder="请输入账号" :border="false"
                 custom-style="background-color:#fff0;border: 1px solid white;border-radius: 8px;margin: 30px 0;"/>
      <van-button round type="default" @click="doSub(buttonStatus)">提交确认</van-button>
    </van-popup>

    <van-dialog
      :show="dialogVisible"
      title="确认删除身份证？"
      show-cancel-button
      @confirm="onConfirm"
      @cancel="onCancel"
    />

    <van-dialog
      :show="dialogCard"
      title="确认删除？"
      show-cancel-button
      @confirm="cardConfirm"
      @cancel="cardCancel"
    />



    <van-toast id="van-toast"/>

  </div>
</template>

<script>
import {
  addBankCards,
  addIdCard, changeBankCards,
  changeIdCard, deleteBankCards,
  deleteIdCard,
  getBankCards,
  getIdCards
} from "../../../requests/merchant";
import Toast from '../../../../static/vant/toast/toast';

var $this;
export default {
  name: "uc_container",
  components: {},
  data() {
    return {
      userinfo: {
        id: "",
        user_name: "",// 姓名
        user_no: "",// 身份证号码
      },
      cardInfo: {},
      disabled: false,
      account: {
        card_name: '',
        card_no: '',
        type: ''
      },
      showAcc: false,
      showCountry: false,
      dialogVisible: false,
      dialogCard: false,
      country: [{name: '中国内地'}, {name: '中国香港'}],
      countryTxt: '中国内地',
      buttonTxt: '修改',
      buttonStatus: '',
      custom_style: `width: 80%;
                     background-image: url(http://aczxsj.ctmon.com.cn/pc/acimg/a1.png);
                     background-color: #6173ad;
                     padding: 25px;
                     color: white;
                     text-align: center;
                     background-size: cover;`,
    };
  },
  methods: {
    changeIdCard() {
      let $regex = /^(?:\d{17}[\dX]|[1-9]\d{14})$/;

      if ($this.userinfo.user_name == '') {
        Toast.fail('请输入姓名');
        return false;
      }
      if (!$regex.test($this.userinfo.user_no) || $this.userinfo.user_no === '') {
        Toast.fail('请输入正确身份证');
        return false;
      }

      let $params = $this.userinfo
      $params['type'] = 1
      let $gofly
      if ($this.userinfo.id) {
        $gofly = changeIdCard($params)
      } else {
        $gofly = addIdCard($params)
      }
      $gofly.then(res => {
        let resp = res.data
        if (resp.code === 0) {
          $this.disabled = true
          Toast.success('保存成功')
          getIdCards().then(res => {
            let resp = res.data
            if (resp.data != '') {
              this.userinfo = resp.data[0]
              this.disabled = true
            }
          })
        } else {
          Toast.fail(resp.msg)
        }
      })
    },
    delIdCard() {
      deleteIdCard($this.userinfo).then(res => {
        let resp = res.data
        if (resp.code === 0) {
          $this.disabled = false
          $this.dialogVisible = false
          $this.userinfo = ''
          Toast.success('删除成功')
        } else {
          Toast.fail(resp.msg)
        }
      })
    },
    doSub(status) {
      if (status === 'add') {
        addBankCards($this.account).then(res => {
          let resp = res.data
          if (resp.code === 0) {
            Toast.success('保存成功')
          } else {
            Toast.fail(resp.msg)
          }
        })
      }else if (status === 'edit') {
        changeBankCards($this.account).then(res => {
          let resp = res.data
          if (resp.code === 0) {
            Toast.success('保存成功')
          } else {
            Toast.fail(resp.msg)
          }
        })
      }else if (status === 'del') {
        deleteBankCards($this.account).then(res => {
          let resp = res.data
          if (resp.code === 0) {
            $this.dialogCard = false
            $this.account = ''
            Toast.success('删除成功')
          } else {
            Toast.fail(resp.msg)
          }
        })
      }
      getBankCards().then(res => {
        let resp = res.data
        if (resp.data != '') {
          this.cardInfo = resp.data.list
        }
      })
      $this.showAcc = false
    },
    showAdd(name, status) {
      $this.account = {}
      if (name=== 'bank') {
        $this.account.type = 1
        $this.showAcc = true
      }
      if (name=== 'zfb') {
        $this.account.type = 2
        $this.showAcc = true
      }
      $this.buttonStatus = status
    },
    showEdit(index, status) {
      if (index>=0) {
        $this.account = $this.cardInfo[index]
        $this.showAcc = true
      }
      $this.buttonStatus = status
    },
    showDel(index, status) {
      if (index>=0) {
        $this.account = $this.cardInfo[index]
        $this.dialogCard = true
      }
      $this.buttonStatus = status
    },
    showDialog() {
      $this.dialogVisible = true;
    },
    onConfirm() {
      $this.delIdCard();
    },
    onCancel() {
      $this.dialogVisible = false;
    },
    cardConfirm() {
      $this.doSub();
    },
    cardCancel() {
      $this.dialogCard = false;
    },
    closeAcc() {
      $this.showAcc = false
    },
    CloseCountry() {
      $this.showCountry = false
    },
    SelectCountry(e) {
      console.log(e)
      $this.countryTxt = e.mp.detail.name
    },
    doNameChange(e) {
      $this.userinfo.user_name = e.mp.detail;
    },
    doNoChange(e) {
      $this.userinfo.user_no = e.mp.detail;
    },
    doCardnameChange(e) {
      $this.account.card_name = e.mp.detail;
    },
    doCardnoChange(e) {
      $this.account.card_no = e.mp.detail;
    },
    loading() {
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
    }
  },
  mounted() {
  },
  created() {
    $this = this;
  },
  onLoad() {
    // reload_userinfo($this);
  },
  onShow() {
    getIdCards().then(res => {
      let resp = res.data
      if (resp.data != '') {
        this.userinfo = resp.data[0]
        this.disabled = true
      }
    })

    getBankCards().then(res => {
      let resp = res.data
      if (resp.data != '') {
        this.cardInfo = resp.data.list
      }
    })

  },
};
</script>

<style>
.theme_color {
  color: #323233 !important;
}

.input-class {
  text-align: right !important;
}

.v-class {
  margin-top: 7.5px !important;
}

.group {
  margin-bottom: 20px !important;
}
</style>
<style scoped>
@import "index.css";


</style>
